<template>
  <div>
    <template>
      <div v-loading="loading">
        <a-form-model
          ref="coordinateForm"
          :rules="rules"
          :model="info"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 10 }"
        >
          <a-form-model-item label="是否使用默认配置">
            <a-radio-group v-model="info.is_use_default">
              <a-radio :value="1"> 使用 </a-radio>
              <a-radio :value="0"> 不使用 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="店铺开通金额" prop="open_price">
            <a-input v-model="info.open_price" />
          </a-form-model-item>
          <a-form-model-item label="续费金额" prop="renew_price">
            <a-input v-model="info.renew_price" />
          </a-form-model-item>
<!--          <a-form-model-item label="有效期" prop="end_time">-->
<!--            <a-date-picker v-model="info.end_time" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />-->
<!--          </a-form-model-item>-->
          <a-form-model-item label="代理分润比利(%)" prop="profit">
            <a-input
              type="number"
              :min="0"
              :max="100"
              :step="0.1"
              precision="2"
              :addon-after="'%'"
              v-model="info.profit"
            />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 24 }">
            <a-divider style="margin:0 0 40px 0;"/>
            <div style="display: flex; justify-content: center;">
              <a-button :loading="btnLoading" type="primary" @click="submitForm" style="margin-right: 8px">
                保存
              </a-button>
              <a-button @click="$router.back()"> 取消 </a-button>
            </div>
          </a-form-model-item>
        </a-form-model>
        <SelectMap v-if="mapVisiable" :value.sync="mapVisiable" @onOk="selectMapOk"></SelectMap>
      </div>
    </template>
  </div>
</template>

<script>
import storage from 'store'
import { setStoreCost, getStoreCost } from '@/api/store'

export default {
  name: 'SettingOther',
  data() {
    return {
      loading: false,
      btnLoading: false,
      mapVisiable: false,
      info: {
        open_price: '',
        renew_price: '',
        end_time: '',
        profit: '',
        is_use_default: 1
      },
      category_index: '',
      categoryInfo: [],
      category_option: [],
      rules: {
        open_price: [{ required: true, message: '请输入商城开通金额', trigger: 'blur' }],
        renew_price: [{ required: true, message: '请输入商城续费金额', trigger: 'blur' }],
        end_time: [{ required: false, message: '请输入有效期', trigger: 'blur' }],
        profit: [{ required: true, message: '代理分润比利', trigger: 'blur' }],
      },
      fix: true,
    }
  },
  created() {
    this.getData()
  },
  props: {
    storeId: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    getData: function () {
      this.loading = true
      console.log(this.storeId)
      getStoreCost({ storeId: this.storeId })
        .then((res) => {
          if (res.code == 0) {
            this.fix = false
            this.$nextTick(() => {
              this.info = res.data
              this.fix = true
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    submitForm: function () {
      this.$refs.coordinateForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          if (this.category_index) {
            this.info.category_id = this.categoryInfo[this.category_index].id
          }
          console.log({
            ...this.info,
            storeId: this.storeId,
          })
          setStoreCost({
            ...this.info,
            storeId: this.storeId,
          })
            .then((res) => {
              if (res.code == 0) {
                if (this.category_index) {
                  this.info.category_name = this.categoryInfo[this.category_index].name
                }
                this.info.option = this.category_option
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    },
    onClickSelectMap: function () {
      this.mapVisiable = true
    },
    selectMapOk(e) {
      this.info.coordinate = e
    },
    handleChange: function (e, name) {
      for (let i = 0; i < this.category_option.length; i++) {
        if (this.category_option[i].name == name) {
          this.category_option.splice(i, 1)
        }
      }
      this.category_option.push({
        name: name,
        list: e,
      })
    },
    onCategoryChange: function (e) {
      this.category_option = []
      this.fix = false
      this.$nextTick(() => {
        this.fix = true
      })
    },
  },
}
</script>

<style scoped>
</style>
